<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>验证邮箱</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script th:inline="javascript">
        /*<![CDATA[*/
        ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/

        function codeCheck() {
            var codeCheck = $("#codeCheck");
            var codeDIV=$("#codeDIV");
            $.post({
                url: ctxPath+"codeCheck",
                data: {'code': $("#code").val()},
                success: function (data) {
                    if (data.toString() === '') {
                        codeCheck.css("color", "green");
                        codeDIV.removeClass("has-error");
                        codeDIV.addClass("has-success")
                    } else {
                        codeCheck.css("color", "red");
                        codeDIV.removeClass("has-success");
                        codeDIV.addClass("has-error")
                    }
                    codeCheck.html(data);
                }
            });
        }
        function canSubmit() {
            return $("#codeCheck").css('color') === 'rgb(0, 128, 0)';
        }
    </script>
    <style>
        .progressText{
            font-size: large;
            margin-top: 5px;
            color: white;
            font-family: YouYuan,serif;
            font-weight: bold;
        }
    </style>
</head>
<body>
<!--<h3 th:text="${session.emailAddress}"></h3>-->
<!--<form action="/codecheck" method="post" onsubmit="return canSubmit()">-->
    <!--<input type="text" id="code" name="code" placeholder="请输入验证码" onblur="codeCheck()">-->
    <!--<input type="submit">-->
<!--</form>-->
<!--<span id="codeCheck"></span>-->
<!--<span style="color: red" th:text="${codeCheck}" th:if="${not #strings.isEmpty(codeCheck)}"></span>-->

<div class="container" style="margin-top: 5%">
    <div class="progress progress-striped active" style="height: 30px">
        <div class="progress-bar progress-bar-danger" role="progressbar"
             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
             style="width: 25%;">
            <p class="progressText">验证手机号</p>
        </div>
        <div class="progress-bar progress-bar-warning" role="progressbar"
             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
             style="width: 25%;">
            <p class="progressText">验证邮箱</p>
        </div>
    </div>
    <div class="row" style="margin-top: 32px">
        <h3 class="text-center" th:text="${session.emailAddress}"></h3>
        <div class="col-md-6 col-md-offset-3" >
            <form role="form"  action="codecheck" method="post" onsubmit="return canSubmit()">
                <div class="form-group input-group-lg" style="margin-top: 15px" id="codeDIV">
                    <input type="text" class="form-control"  id="code" name="code" placeholder="请输入验证码" onblur="codeCheck()">
                </div>

                <p class="text-danger" style="font-size: medium;color: red" id="codeCheck"></p>

                <div style="margin-top: 5px"><button type="submit" class="btn btn-block btn-primary btn-lg" onclick="codeCheck()">验证</button></div>
                <div style="margin-top: 15px">
                    <p class="text-danger" style="font-size: medium;color: red" th:text="${codeCheck}" th:if="${not #strings.isEmpty(codeCheck)}"></p>
                </div>
            </form>
        </div>

    </div>
</div>
</body>
</html>